<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取页面元素案例</title>
</head>
<div>
  <input type="button" value="显示" onclick="showImg()">
  <input type="button" value="隐藏" onclick="hideImg()"><br>
  <h6>Dom结构</h6>
  <img src="DomStruct.png" id="img" width="400" height="200">
</div>
<hr>
<div>
  <p>时间</p>
  <p>地点</p>
  <p>人物</p>
  <input type="button" value="变色" onclick="changerColor()">
</div>
<body>
<script type="text/javascript">
  // 1.点击显示 和 隐藏按钮，控制图片的显示和隐藏效果
  function showImg() {
    var img = document.getElementById("img");
    //conole.log(img);
    //设置css样式的语法 标签.style.样式名称 = 值
    //样式名称  如果有- 需要去掉-，后面的首字母大写 比如 font-size 改为 fontSize
    img.style.display = "block";
  }
  function hideImg() {
    var img = document.getElementById("img");
    img.style.display = "none";
  }
  //2.点击变色改变p标签的颜色
  function changerColor() {
    var p = document.getElementsByTagName("p");
    console.log(p);
    //只能一个一个的改 遍历数组，单独设置样式
    for (var i = 0; i < p.length; i++) {
      p[i].style.color = "blue";
      p[i].style.backgroundColor = "yellow";
    }
  }

</script>
</body>
</html>